<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>修改文章</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui/css/layui.css">
    <link rel="stylesheet" href="/css/scroll-bar.css">
    <link rel="stylesheet" href="/css/sub-page.css">
</head>

<body>
<div class="ok-body">
    <!--面包屑导航区域-->
    <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>理工新闻</cite></a>
                <a><cite>修改新闻</cite></a>
            </span>
        <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </div>
    <!--form表单-->
    <form class="layui-form layui-form-pane ok-form" id="view">

    </form>
</div>
<!--tpl模板-->
<script id="editForm" type="text/html">
    <div class="layui-form-item">
        <input type="hidden" name="articleId" value="{{d.articleId}}">
        <input type="hidden" name="cid" value="{{d.cid}}">
        <label class="layui-form-label">文章标题</label>
        <div class="layui-input-block">
            <input type="text" name="articleTitle" placeholder="请输入文章标题" autocomplete="off" class="layui-input"
                   lay-verify="required" value="{{d.articleTitle}}">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">文章简介</label>
        <div class="layui-input-block">
                    <textarea name="articleSummary" placeholder="请输入文章简介" class="layui-textarea"
                              lay-verify="required">{{d.articleSummary}}</textarea>
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <textarea id="articleContent" name="articleContent">{{d.articleContent}}</textarea>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</script>

<!--js逻辑-->
<script src="/lib/jquery/jquery-1.12.4.min.js"></script>
<script src="/lib/layui/layui.js"></script>
<script src="/lib/ckeditor/ckeditor.js"></script>
<script>
    layui.use(['element', 'form', 'upload', 'laytpl'], function () {
        var element = layui.element;
        var form = layui.form;
        let upload = layui.upload;
        let laytpl = layui.laytpl;
        let params = window.location.href;
        let id = params.substring(params.lastIndexOf('=') + 1)
        let getTpl = editForm.innerHTML,
            view = document.getElementById('view');
        $.get('/manage/articles/' + id, function (resp) {
            laytpl(getTpl).render(resp.data, function (html) {
                view.innerHTML = html;
            });
            form.render();
            CKEDITOR.replace('articleContent')
            //表单提交
            form.on('submit(edit)', function (data) {
                //获取富文本框中的内容
                data.field.articleContent = CKEDITOR.instances.articleContent.getData();
                $.ajax({
                    url: '/manage/articles',
                    data: JSON.stringify(data.field),
                    contentType: 'application/json',
                    type: 'PUT',
                    dataType: 'json',
                    success: function (resp) {
                        layer.msg("编辑成功！", {
                            icon: 6,
                            time: 1000,
                            anim: 4
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                        });
                    }
                });
                return false;
            })
        }, 'json')
    })

</script>
</body>

</html>